<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/jdbc">
<head>
    <meta charset="utf-8">
    <title>添加档案</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <style>
        .layui-form-item .layui-input-company {
            width: auto;
            padding-right: 10px;
            line-height: 38px;
        }

        .layuimini-form > .layui-form-item > .layui-form-label {
            width: 90px !important;
        }

        .layuimini-form > .layui-form-item > .layui-input-block {
            margin-left: 125px !important;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layuimini-form">
            <div class="layui-form-item" id="stationView">
                <!--地点-->
            </div>
            <div class="layui-form-item" id="cabinetView">
                <!--柜子-->
            </div>
            <div class="layui-form-item" id="chestView">
                <!--箱子-->
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">档案名称</label>
                <div class="layui-input-block">
                    <input type="text" id="name" name="name" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">档案编号</label>
                <div class="layui-input-block">
                    <input type="text" id="serial" name="serial" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">档案地址</label>
                <div class="layui-input-block">
                    <input type="text" id="address" name="address" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label ">备注</label>
                <div class="layui-input-block">
                    <input type="text" id="remark" name="remark" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label ">描述</label>
                <div class="layui-input-block">
                    <textarea type="text" id="description" class="layui-textarea" name="description"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="saveBtn">确认保存</button>
                    <button type="button" class="layui-btn layui-btn-primary l" onclick="back()">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script id="stationTemplate" type="text/html">
    <label class="layui-form-label required">{{ d.label }}</label>
    <div class="layui-input-block">
        <select name="{{d.name}}" lay-filter="stationSelect" lay-verify="required">
            {{# layui.each(d.list, function(index, item){ }}
            <option value="{{item.id}}">{{ item.name }}</option>
            {{# }); }}
        </select>
    </div>
</script>
<script id="cabinetTemplate" type="text/html">
    <label class="layui-form-label required">{{ d.label }}</label>
    <div class="layui-input-block">
        <select name="{{d.name}}" lay-filter="cabinetSelect" lay-verify="required">
            {{# layui.each(d.list, function(index, item){ }}
            <option value="{{item.id}}">{{ item.name }}</option>
            {{# }); }}
        </select>
    </div>
</script>
<script id="chestTemplate" type="text/html">
    <label class="layui-form-label required">{{ d.label }}</label>
    <div class="layui-input-block">
        <select name="{{d.name}}" lay-verify="required">
            {{# layui.each(d.list, function(index, item){ }}
            <option value="{{item.id}}">{{ item.name }}</option>
            {{# }); }}
        </select>
    </div>
</script>
<script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script th:inline="javascript">
    layui.use(['form', 'laytpl'], function () {
        let form = layui.form
            , $ = layui.jquery
            , laytpl = layui.laytpl
            , layer = layui.layer;

        //加载完成执行
        $(document).ready(function () {
            let stations = [[${stations}]];
            let cabinets = [[${cabinets}]];
            let chests = [[${chests}]];
            let record = [[${record}]];

            selectTemplateList(stations, "stationid", "派出所", "stationTemplate", "stationView");
            selectTemplateList(cabinets, "cabinetid", "档案柜", "cabinetTemplate", "cabinetView");
            selectTemplateList(chests, "chestid", "箱门", "chestTemplate", "chestView");

            if(record!=null){
                $("select[name='stationid']").val(record.stationid);
                $("select[name='cabinetid']").val(record.cabinetid);
                $("select[name='chestid']").val(record.chestid);
                $("#name").val(record.name);
                $("#serial").val(record.serial);
                if(record.serial!=null)
                    $("#serial").attr({"readonly":"readonly"});
                $("#address").val(record.address);
                $("#remark").val(record.remark);
                $("#description").val(record.description);
            }
        });

        /**
         * 封装一个select选择器: selectTemplate(api,name,label,templateId,viewId){};
         * 参数 :
         * 请求地址: api,
         * select的name属性: name,
         * label名字: label
         * 模板id: templateId
         * 视图容器id: viewId
         */
        function selectTemplate(api, id, name, label, templateId, viewId) {
            $.post(api,{
                "id": id
            },function (res) {
                console.log(res);
                let list = {"name": name, "label": label, "list": [{"value": '', "name": "请选择"}] };
                if (res.data != null) {
                    list = {"name": name,"label": label, "list": res.data};
                }
                let getTpl = document.getElementById('' + templateId + '').innerHTML;
                let view = document.getElementById('' + viewId + '');
                view.innerHTML = null;
                laytpl(getTpl).render(list, function (html) {
                    view.innerHTML = html;
                });
                form.render('select');
            });
        }

        /**
         * 封装一个select选择器: selectTemplate(list,name,label,templateId,viewId){};
         * 参数 :
         * 数据: api,
         * select的name属性: name,
         * label名字: label
         * 模板id: templateId
         * 视图容器id: viewId
         */
        function selectTemplateList(list, name, label, templateId, viewId) {
            list = {"name": name,"label": label,"list": list};
            let getTpl = document.getElementById('' + templateId + '').innerHTML;
            let view = document.getElementById('' + viewId + '');
            view.innerHTML = null;
            laytpl(getTpl).render(list, function (html) {
                view.innerHTML = html;
            });
            form.render('select');
        }

        //监听下拉选择框 地点
        form.on('select(stationSelect)', function (data) {
            let station = data.value;
            selectTemplate("/cabinet/getCabinet", station, "cabinetid", "档案柜", "cabinetTemplate", "cabinetView");
        });

        //监听下拉选择框 柜子
        form.on('select(cabinetSelect)', function (data) {
            let cabinet = data.value;
            selectTemplate("/chest/getChest", cabinet, "chestid", "箱门", "chestTemplate", "chestView");
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            console.log(data.field);
            $.ajax({
                url:'/record/addRecord',
                type:`post`,
                dataType:`json`,
                data: data.field,
                success:function (res) {
                    console.log(res);
                    if (res.code){
                        layer.msg('添加成功');
                        //提交成功关闭窗口
                        layer.close(layer.index);
                        window.parent.location.reload();
                    }else{
                        layer.msg('添加失败');
                    }
                }
            });
            return false;
        });

        window.back = function () {
            let iframeIndex = parent.layer.getFrameIndex(window.name);
            parent.layer.close(iframeIndex);
        }
    });
</script>
</body>
</html>